<template>
  <!--面包屑-->
  <div style="margin-bottom: 30px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link to="/Approval/MaterialProcurementShow">物资采购审批</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>物资采购审批页面</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  
  
    <el-form ref="ruleFormRef" style="max-width: 600px;margin:auto" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
    
        <el-form-item label="货物名称" prop="nameOfGoods">
          <el-input v-model="form.nameOfGoods" placeholder="请输入货物名称" disabled />
        </el-form-item>
    
        <el-form-item label="类型" prop="materialStoreType">
          <el-select v-model="form.materialStoreType" placeholder="请选择类型" disabled >
            <el-option label="车辆用品" value="车辆用品" />
            <el-option label="办公用品" value="办公用品" />
          </el-select>
        </el-form-item>
  
        <el-form-item label="材质" prop="material">
          <el-select v-model="form.material" placeholder="请选择材质" disabled>
            <el-option label="金属" value="金属" />
            <el-option label="橡胶" value="橡胶" />
            <el-option label="塑料" value="塑料" />
            <el-option label="液体" value="液体" />
            <el-option label="纸质" value="纸质" />
          </el-select>
        </el-form-item>
  
        <el-form-item label="规格" prop="specifications">
          <el-input v-model="form.specifications" placeholder="请输入规格" disabled />
        </el-form-item>
  
        <el-form-item label="产地" prop="">
          <el-select v-model="form.CountryId" placeholder="请选择国家" size="large" style="width: 240px" @change="getEconomizeList" disabled>
        <el-option v-for="item in countryData" :key="item.countryId" :label="item.countryName" :value="item.countryId"/>
      </el-select>
          
          &nbsp;&nbsp;
          <el-select v-model="form.EconomizeId" placeholder="请选择省/州" size="large" style="width: 240px" disabled>
        <el-option v-for="item in EconomizeData" :key="item.economizeId" :label="item.economizeName" :value="item.economizeId"/>
      </el-select>
        </el-form-item>
    
        <el-form-item label="数量" prop="number">
          <el-input-number v-model="form.number" :min="1" @change="handleChange" placeholder="请输入数值" disabled />
        </el-form-item>
  
        <el-form-item label="期望交付日期" prop="deliveryDate">
          <el-date-picker v-model="form.deliveryDate" type="date" placeholder="请输入期望交付日期" value-format="YYYY-MM-DD" disabled/>
        </el-form-item>
  
        <el-form-item label="用途描述" prop="usageDescription">
          <el-input v-model="form.usageDescription" :rows="3" type="textarea" placeholder="请输入用途描述" disabled/>
        </el-form-item>
  
        <el-form-item label="备注" prop="notes">
          <el-input v-model="form.notes" :rows="3" type="textarea" placeholder="请输入备注信息" disabled/>
        </el-form-item>

     
      </el-form>
   
<el-table :data="ContractApprova" border style="width: 100%">
    <el-table-column prop="approvalResult" label="审批结果" align="center"/>
       <el-table-column prop="approvalNotes" label="备注" align="center">
            <template v-slot="scope">
<span v-if="scope.row.approvalNotes==''">-</span>
            </template>
       </el-table-column>
           <el-table-column prop="createdDate" label="审批时间" align="center">
            <template v-slot="scope">
{{ scope.row.createdDate.replace('T', ' ').substring(0,19) }}
            </template>
           </el-table-column>
               <el-table-column prop="approver" label="审批人" align="center"/>
  </el-table>

    </template>
    
    <script setup lang="ts">
    import { reactive, ref, onMounted, computed } from 'vue'
    import axios from 'axios';
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
    import { ElMessage, ElMessageBox } from 'element-plus'
    
    import {useRoute,useRouter} from 'vue-router'
    
    const route = useRoute();
    const router = useRouter();
    
    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
  
    onMounted(() => {
      

      getCountryList()

      getEconomizeList()
      getReverseMaterialStore()

      getContractApproval()
    })
  
    
    //form表单
    const form: any = reactive({
      materialStoreId:'',
      companyID: "",
      user_Id: '',
      nameOfGoods: "",
      materialStoreType: "",
      material: "",
      specifications: "",
      CountryId: '',
      EconomizeId: '',
      number: 0,
      deliveryDate: "",
      usageDescription: "",
      applicant: "张三",
      approvalStatus: 10,
      approver: "",
      registrant: "",
      paymentMethod: "",
      unitPrice: 0,
      notes: "",
      materialClassificat: 1,
      createdBy: "张三"
    })
  
    //数量
    const handleChange = (value: number) => {
    //console.log(value)
  }
    
    //校验规则
    const rules = reactive<FormRules>({
      nameOfGoods: [
        { required: true, message: '请输入货物名称', trigger: 'blur' },
      ],
      materialStoreType: [
        { required: true, message: '请选择类型', trigger: 'change',},
      ],
      material: [
        { required: true, message: '请选择材质', trigger: 'change',},
      ],
      specifications: [
        { required: true, message: '请输入规格', trigger: 'change',},
      ],
      CountryId: [
        { required: true, message: '请选择产地', trigger: 'change',},
      ],
      deliveryDate: [
        { required: true, message: '请选择期望交付日期', trigger: 'change',},
      ],
      usageDescription: [
        { required: true, message: '请输入用途描述', trigger: 'change',},
      ],
    })
  
      //获取国家列表
    const countryData: any = ref([]);
    const getCountryList = () => {
      axios.get('/mread/api/ShowMaterialStore/GetCountryList', {
        params: {
          
        }
      }).then(res=>{
      // console.log(res);
        countryData.value = res.data.data;
    }).catch(err=>{
      console.log(err);
      
    })    
    }
  
      //获取省/州列表
      const EconomizeData: any = ref([]);
    const getEconomizeList = () => {
       form.EconomizeId = "";
      axios.get('/mread/api/ShowMaterialStore/GetEconomizeList', {
        params: {
          CountryId: form.CountryId || 0
        }
      }).then(res=>{
      //console.log(res);
      
      EconomizeData.value = res.data.data;
    }).catch(err=>{
      console.log(err);
      
    })    
    }
  
//显物资采购审批记录
const ContractApprova:any=ref([])
const getContractApproval = async () => {
  axios.get("/mread/api/ExamineAndApprove/GetApprovals?materialStoreId=" + route.query.materialStoreId).then(res => { 
    ContractApprova.value=res.data.data
    //console.log(res.data);
  })
}

    //反填
const getReverseMaterialStore=()=>{
  axios.get('/mread/api/ShowMaterialStore/ReverseMaterialStore',
    {
      params: {
        materialStoreId:route.query.materialStoreId
      }
    }
  ).then(res=>{
    //console.log(res);
    let Data = res.data.data;
    form.companyID = Data.companyID;
    form.user_Id = Data.user_Id;
    form.nameOfGoods = Data.nameOfGoods;
    form.materialStoreType = Data.materialStoreType;
    form.material = Data.material;
    form.specifications = Data.specifications;
    getCountryList()
    form.CountryId = Data.countryId,
      getEconomizeList()
    form.EconomizeId = Data.economizeId,
    form.number = Data.number;
    form.deliveryDate = Data.deliveryDate;
    form.usageDescription = Data.usageDescription;
    form.applicant = Data.applicant;
    form.approvalStatus = Data.approvalStatus;
    form.approver = Data.approver;
    form.registrant = Data.registrant;
    form.paymentMethod = Data.paymentMethod;
    form.unitPrice = Data.unitPrice;
    form.notes = Data.notes;
    form.materialClassificat = Data.materialClassificat;  
    form.createdBy = Data.createdBy;
    form.createdDate = Data.createdDate;
    form.updatedBy = Data.updatedBy;
    form.updatedDate = Data.updatedDate;
    form.deletedBy = Data.deletedBy;
    form.deletedDate = Data.deletedDate;
    form.isDeleted = Data.isDeleted;
  }).catch(err=>{
    console.log(err);
    
  })    
}
    </script>
    
    <style scoped>
    
    </style>